<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <title>重置密码</title>
    <!-- General CSS Files -->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <link rel="stylesheet" href="assets/css/app.min.css">
    <link rel="stylesheet" href="assets/bundles/bootstrap-social/bootstrap-social.css">
    <!-- Template CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/components.css">
    <!-- Custom style CSS -->
    <link rel="stylesheet" href="assets/css/custom.css">
    <link rel="stylesheet" href="assets/css/element.css">
    <link rel='shortcut icon' type='image/x-icon' href='assets/img/favicon.ico'/>
</head>

<body>
<div class="loader"></div>
<div id="app">
    <section class="section">
        <div class="container mt-5">
            <div class="row">
                <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h4>重置密码</h4>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">设置你的新密码</p>
                            <form>
                                <div class="form-group">
                                    <label for="email">邮箱</label>
                                    <input id="email" type="email" class="form-control" name="email" tabindex="1"
                                           required="" autofocus="" v-model="update.email">
                                </div>
                                <div class="form-group">
                                    <label for="password">新密码</label>
                                    <input id="password" type="password" class="form-control pwstrength"
                                           name="password" tabindex="2" required="" v-model="update.password">
                                </div>
                                <div class="form-group">
                                    <label for="password-confirm">确认密码</label>
                                    <input id="password-confirm" type="password" class="form-control"
                                           name="confirm-password" tabindex="2" required="">
                                </div>
                                <div class="form-group">
                                    <button type="button" class="btn btn-primary btn-lg btn-block" tabindex="4" @click="userInFoUpdate()">
                                        确定重置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="mt-5 text-muted text-center">
                        重置成功? <a th:href="@{/login}">去登录</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- General JS Scripts -->
<script src="assets/js/jquery-3.4.1.js"></script>
<script src="assets/js/app.min.js"></script>
<!-- JS Libraies -->
<script src="assets/js/vue.js"></script>
<script src="assets/js/dataParse.js"></script>
<script src="assets/js/element.js"></script>
<script src="assets/js/axios.js"></script>
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="assets/js/scripts.js"></script>
<!-- Custom JS File -->
<script src="assets/js/custom.js"></script>
<script>
    let token = $("meta[name='_csrf']").attr("content");
    let header = $("meta[name='_csrf_header']").attr("content");
    axios.defaults.headers.common[header] = token;
    const app = new Vue({
        el: "#app",
        data() {
            return {
                update: {
                    email: "",
                    password: "",
                }
            }
        },
        methods: {
            userInFoUpdate(){
                axios({
                    method: "post",
                    url: "/userInFoUpdate",
                    transformRequest: [
                        function (data) {
                            return parseParams(data);
                        }
                    ],
                    data: {
                        userpasw: this.update.password,
                        useremail: this.update.email,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.$notify({
                            title: '重置成功',
                            message: '请到登录页面进行登录!',
                            position: 'bottom-right'
                        });
                    } else {
                        this.$notify.error({
                            title: '重置失败',
                            message: '请检查所填数据是否正确!',
                            position: 'bottom-right'
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>